<template>
  <div>
    <div class="common-layout">
      <el-container class="app-body">
        <el-aside>
          <span class="sys-title" :style="{'width': isCollapse ? 'unset' : '200px'}">
            <span v-if="!isCollapse">属性管理平台</span>
          </span>
          <div class="menu-box">
            <ifMenu :isCollapse="isCollapse" :menuList="menuList" />
          </div>
        </el-aside>
        <el-container>
          <el-header class="app-header" style="position:relative;">
            <div class="header-left" style="font-size:20px;">
              <el-icon v-if="isCollapse" @click="changeIsCollapse"><Expand /></el-icon>
              <el-icon v-else @click="changeIsCollapse"><Fold /></el-icon>
            </div>
            <div class="header-right">
              <div class="sys-right">
                <el-icon><Bell /></el-icon>
                <div class="sys-avatar">
                  <el-dropdown>
                    <span class="el-dropdown-link">
                      <span class="avatar-img">
                        {{ userName ? userName[0] : '' }}
                      </span>
                      <span class="user-name">
                        <span>{{userName ? userName : '无用户信息'}}</span>
                        <el-icon class="el-icon--right"><arrow-down /></el-icon>
                      </span>
                    </span>
                    <template #dropdown>
                      <el-dropdown-menu>
                        <el-dropdown-item @click="loginOut">安全退出</el-dropdown-item>
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                </div>
              </div>
            </div>
          </el-header>
          <el-main class="el-main-pri">
            <div class="el-main-box">
              <el-config-provider :locale="locale">
                <div class="container-wrapper">
                  <router-view v-slot="{ Component }">
                      <component :is="Component" />
                  </router-view>
                  <div v-loading="isSubAppLoading" id="micro-app"></div>
                </div>
              </el-config-provider>
            </div>
          </el-main>
        </el-container>
      </el-container>
    </div>
  </div>

</template>

<script lang="ts">
import { defineComponent, ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import { resetStore } from '@/store'
import ifMenu from '@/components/if-menu/index.vue'

export default defineComponent({
  name: 'main-view',
  components: {
    ifMenu
  },
  setup() {
    const router = useRouter()
    const { state: { menuList, account: { userName } } } = useStore()
    const isCollapse = ref<boolean>(false)
    const store = useStore()
    const isSingle = ref<Boolean>(false)
    const isRouterAlive = ref<boolean>(true)
    const hasNewsCenter = ref(false)
    const loginOut = () => {
      resetStore()
      router.replace('/login')
    }
    const changeIsCollapse = () => {
      isCollapse.value = !isCollapse.value
    }
    const isSubAppLoading = computed(() => {
      return store.state.app.subAppLloading
    })
    return {
      isSingle,
      menuList,
      isRouterAlive,
      userName,
      hasNewsCenter,
      isSubAppLoading,
      isCollapse,
      // methods
      loginOut,
      changeIsCollapse,
      locale: zhCn
    }
  },
})
</script>

<style lang="less">
@aside-bg: #181B39;
.app-header {
  background-color: #fff;
  height: 80px !important;
  line-height: 80px;
  display: flex;
  justify-content: space-between;
  box-shadow: 0px 1px 4px 0px rgba(0,21,41,0.1200);
  padding: 0;
  .sys-right {
    color: #fff;
    padding-right: 34px;
    display: inline-flex;
    align-items: center;
    .sys-avatar {
      margin-left: 10px;
      display: flex;
      align-items: center;
    }
  }
  .header-left {
    padding-left: 10px;
    cursor: pointer;
  }
  .el-icon--right {
    color: #1e222d;
  }
}
.sys-title{
  display: flex;
  height: 80px !important;
  width: 100%;
  font-size: 18px;
  background: @aside-bg;
  color: aliceblue;
  justify-content: center;
  align-items: center;
  img {
    width: 32px;
    height: 32px;
    margin-right: 10px;
    vertical-align: middle;
  }
  span{
    vertical-align: middle;
  }
}
.el-dropdown-link {
  display: flex;
  .user-name {
    display: flex;
    cursor: pointer;
    align-items: center;
    font-size: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .avatar-img {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: #3D6CF7;
    display: flex;
    margin-right: 10px;
    align-items: center;
    justify-content: center;
    color: #fff;
  }
}
.single-box {
  width: 100wh;
  height: 100vh;
}
.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
.el-main-pri{
  display: flex;
  flex-direction: column;
  padding: 15px!important;
  background: #F0F2F5;
  position: relative;
  height: calc(100vh - 80px);
  overflow: hidden;
  overflow-y: auto;
  .el-main-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    flex-direction: column;
    padding-bottom: 0px;
    .container-wrapper {
      display: flex;
      flex: 1;
      flex-direction: column;
    }
    .beauty-scroll {
      height: calc(100vh - 80px);
      overflow-y: auto;
      display: block;
    }
    .container {
      height: 100%;
      width: 100%;
      float: right;
      box-sizing: border-box;
    }
  }
}
.app-body {
  height: 100vh;
  overflow-y: auto;
}
// 列表模块样式
.el-breadcrumb__inner.is-link{
  font-weight: normal;
}
.el-link.el-link--success span{
  color:#3D6CF7;
}
.el-link.el-link--success.is-underline:hover:after,.el-link.el-link--danger.is-underline:hover:after{
  display:none;
}
span.el-breadcrumb__separator,.el-breadcrumb span{
  margin:0 2px;
  font-weight: normal;
}
</style>
